const saleContent = [
    {
        count: '400000',
        perMint: "0.00055",
        doller: '1.23',
        ethCount: "0.2196",
        USDTCount: "492",
        address:'0xA5...564F',
        id:'9556'
    },
    {
        count: '500000',
        perMint: "0.00055",
        doller: '1.23',
        ethCount: "0.274",
        USDTCount: "615",
        address:'0xA5...564F',
        id:'5685'
    },
    {
        count: '100000',
        perMint: "0.0006",
        doller: '1.33',
        ethCount: "0.059375",
        USDTCount: "133",
        address:'0xA5...564F',
        id:'6853'
    },
    {
        count: '1800000',
        perMint: "0.00065",
        doller: '1.456',
        ethCount: "1.17",
        USDTCount: " 2620.8",
        address:'0xA5...564F',
        id:'2871'
    }
];

const salesListItemDom = (saleContentOne) => {
    let { count, perMint, doller, id, address, ethCount, USDTCount } = saleContentOne;
    return `
    <div class="list-item-container hoverMainColor">
        <div class="left-item">
            <p class="title">ARBS</p>
            <p class="count">${count}</p>
            <div class="perMint">
                <img src="my_imgae/ETH.png" />
                <p class="perValue">${perMint} / PER MINT</p>
            </div>
            <p class="total">$ ${doller}</p>
        </div>
        <div class="right-item">
            <div class="id-address">
                <div class="mint-id">
                    <p> #${id} </p>
                </div>
                <p class="mint-address"> ${address} </p>
            </div>
            <div class="total-value">
                <div class="mint-total">
                    <img src="./my_imgae/ETH.png" />
                    <p> ${ethCount} </p>
                </div>
                <p class="mint-value"> $ ${USDTCount} </p>
            </div>
            <div style="flex:1"></div>
            <div onclick="updateShowSaleDashboard()" class="buyBtn">Buy</div>
        </div>
    </div>`;
}

function updateSalesList(saleContent) {
    let saleDom = document.querySelector("#ListContainer");
    let domStrList = [];
    for(let i = 0; i<saleContent.length ; i++) {
        domStrList.push(salesListItemDom(saleContent[i]));
        domStrList.push(salesListItemDom(saleContent[i]));
    }
    saleDom.innerHTML = domStrList.join('\n');
    console.log(saleDom);
}
function registerTabs() {
    let tabs = document.querySelector("#tabs").children;
    const updateActive = (el) => {
        for(let i = 0 ; i < tabs.length ; i++) {
            const tab = tabs[i];
            if(tab === el) {
                tab.classList.add('active');
            } else {
                tab.classList.remove('active');
            }
        }
        
    }
    for(let i = 0 ; i < tabs.length ; i++) {
        const tab = tabs[i];
        tab.onclick = () => {
            if(i==0) {
                ListContainer.style.display = 'block';
            } 
            if(i==1) {
                ListContainer.style.display = 'none';
            } 
            updateActive(tab);
        }
    }
}
function preventClick() {
    document.querySelector("#forSale").addEventListener('click',(e) => {
        e.stopPropagation();
    })
}
preventClick();
registerTabs();
updateSalesList(saleContent);
function updateShowSaleDashboard(saleContentOne){
    saleDashboard.style.display = saleDashboard.style.display === 'none'? "flex": "none";

}